import React from 'react';
import './index.css'
import { connect } from 'react-redux'
import { getSongList } from '../../store/songList.redux'

@connect(
  state => ({
    songList: state.songList.songList,
    topInfo: state.songList.topInfo,
    totalSongNum: state.songList.totalSongNum,
    updateTime: state.songList.updateTime
  }), {
  getSongList,
  setList(list){
    return {type:'player_list',list}
  }
}
)
class SongList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  componentDidMount() {
    const id = this.props.match.params.id
    this.props.getSongList(id);
  }
  componentDidUpdate(){
    this.props.setList(this.props.songList)
  }
  render() {
    return (
      <div className="songList">
        <div className="songListBox">
          <div className="loging"></div>
          <div className="headbox headbox2">
            <p className="p1">
              <img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo_ch.svg?max_age=2592000" alt="" />
            </p>
            <p className="p2">
              <span>戳我查看</span>
            </p>
          </div>
          <div className="songInfoBox">
            <div className="songInfo">
              <p className="song_pic">
                <img src={this.props.topInfo.picAlbum} alt="" />
              </p>
              <h2 className="song_title">{this.props.topInfo.listName}</h2>
              <h3 className="song_number">{this.props.topInfo.listName} 第170天</h3>
              <h3 className="song_time">更新时间: {this.props.updateTime}</h3>
              <span className="iconfont icon-you_you song_play"></span>
            </div>
            <div className="songList">
              <p className="songList_num">
                排行榜
            <span>共{this.props.totalSongNum}首</span>
              </p>
              <ul>
                {
                  this.props.songList.map((song, index) => (
                    <li key={song.songId} onClick={()=>this.props.history.push(`/player/${song.songMid}/${song.songId}`)}>
                      <p className="songlist_index songlist_num3">{index + 1}</p>
                      <div className="songlist_name">
                        <p className="song_name">{song.songName}</p>
                        <p className="singer_name">
                          {
                            song.singer.map(s => (
                              <span key={s.singerMid}>
                                {s.singerName}
                              </span>
                            ))
                          }
                        </p>
                      </div>
                      <p className="iconfont icon-download songList_xiazai"></p>
                    </li>
                  ))
                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default SongList